<!--
 * @Description:
 * @Author: dh
 * @Date: 2021-08-19 17:18:39
 * @LastEditors: dh
 * @LastEditTime: 2023-08-08 16:12:51
-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<!--
  animation-name : 动画名称，对应 @keyframes
  animation-duration : 动画的持续时间
  animation-timing-function : 动画的过渡类型
  animation-delay : 动画延迟的时间
  animation-iteration-count : 动画的循环次数  infinite : 循环动画
  animation-direction : 方向 alternate : 反向播放
  animation-fill-mode : 动画时间之外的状态 forwards : 停止时，保留最后一帧 ;backwards : 停止时，回到第一帧 ; both : 同时运用 forwards / backwards
 -->

	<body>
		<div class="btn">stop</div>
		<div class="animation"></div>

		<style>
			.animation {
				width: 50px;
				height: 50px;
				border: 1px solid red;
				animation: move 2s linear infinite alternate;
			}

			@keyframes move {
				0% {
					transform: translate(-100px, 0);
				}

				100% {
					transform: translate(100px, 0);
				}
			}
		</style>
		<script>
			document.querySelector('.btn').addEventListener('click', function () {
				let btn = document.querySelector('.btn');
				let elem = document.querySelector('.animation');
				let state = elem.style['animationPlayState'];

				if (state === 'paused') {
					elem.style['animationPlayState'] = 'running';
					btn.innerText = 'stop';
				} else {
					elem.style['animationPlayState'] = 'paused';
					btn.innerText = 'play';
				}
			});
		</script>
	</body>
</html>
